<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>标签管理</el-breadcrumb-item>
      <el-breadcrumb-item>标签-列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>

        <el-row :gutter="30">

        <el-col :span="3">
          <el-button type="primary" @click="handleAddNewLabel ()" icon="el-icon-search"
            >加入新标签</el-button
          >
        </el-col>

          <el-col :span="8">
            <el-date-picker
      v-model="timeRange"
      type="datetimerange"
      range-separator="至"
      start-placeholder="筛选开始时间"
      end-placeholder="筛选结束时间">
    </el-date-picker>
        </el-col>

        <el-col :span = "3">
          <el-select v-model="selecttype">
            <el-option v-for="ftypes in typelist" 
            :label="ftypes" 
            :key="ftypes"
            :value="ftypes"/>
          </el-select>
        
        </el-col>

        <el-col :span = "3">
          <el-select v-model="selectpass">
            <el-option v-for="fpass in passlist" 
            :label="fpass" 
            :key="fpass"
            :value="fpass"/>
          </el-select>
        
        </el-col>

        
            <el-col :span="4">
          <el-input
            placeholder="地点搜索"
            v-model="selectaddress"
            clearable
            @clear=""
            @click=""
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="search()"
            ></el-button>
          </el-input>
        </el-col>
      </el-row>

 <el-table :data="labelList" border stripe>
   <el-table-column label="创建时间" prop="createtime">
          <template slot-scope="scope">
            {{ scope.row.createtime | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column label="地点坐标" prop="point"></el-table-column>
        <el-table-column label="地点位置" prop="address"></el-table-column>
        <el-table-column label="通行情况" prop="type"></el-table-column>
        <el-table-column label="路况类型" prop="pass"></el-table-column>
        


        <el-table-column label="操作" width="240px">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="getlabel(scope.row.id)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="deleteLabel(scope.row.id)"
            ></el-button>
            
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.currentPage"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <el-dialog title="添加新标签" :visible.sync="newDialogVisible" width="50%">
    <el-row :gutter="20">
           <el-col :span="4">
        <label for="point">地点坐标:</label>
                    </el-col>
            <el-col :span="10">
        <el-input v-model="newpoint" placeholder='000,000'>
          </el-input>
     </el-col>
      <el-col :span="4">
        <el-button @click="getaddress()">获取位置</el-button>
     </el-col>
       </el-row>

    <el-row :gutter="20">
           <el-col :span="4">
        <label for="answer">地点位置:</label>
                    </el-col>
            <el-col :span="16">
        <label >{{newaddress}}
          </label>
            </el-col>
            </el-row>


    <el-row :gutter="20">
           <el-col :span="4">
        <label for="answer">路况类型:</label>
                    </el-col>
            <el-col :span="16">
        <el-select v-model="newtype">
            <el-option v-for="ntype in typelist" 
            :label="ntype" 
            :key="ntype"
            :value="ntype"/>
          </el-select>
            </el-col>
            </el-row>

            <el-row :gutter="10">

              <el-row :gutter="20">
           <el-col :span="4">
        <label for="answer">通行情况:</label>
                    </el-col>
            <el-col :span="4">

	    <el-button :class="[flag===0?yes:no]" @click="chooseEmer(0)">{{pass1}}</el-button>
      </el-col>
      <el-col :span="4">
	    <el-button :class="[flag===1?yes:no]" @click="chooseEmer(1)">{{pass2}}</el-button>

            </el-col>
            </el-row>

      <el-row :gutter="20">
           <el-col :span="6">
        <label for="point">提醒其他人需要注意前方路况的时间:</label>
                    </el-col>
            <el-col :span="4">
        <el-input v-model="newtime" placeholder='0'>
          </el-input>
          </el-col>
          <el-col :span="4">
        <label for="point">分钟</label>
                    </el-col>
     
       </el-row>


<el-col :span="7">

        <el-button type="primary" @click="insertLabel ()" icon="el-icon-search"
            >添加</el-button>
     </el-col>
       </el-row>

    </el-dialog>

 <el-dialog title="修改标签" :visible.sync="showDialogVisible" width="50%">

    <el-row :gutter="20">
           <el-col :span="4">
        <label for="answer">地点:</label>
                    </el-col>
            <el-col :span="16">
        <label >{{nowlabel.address}}
          </label>
            </el-col>
            </el-row>


    <el-row :gutter="20">
           <el-col :span="4">
        <label for="answer">路况类型:</label>
                    </el-col>
            <el-col :span="16">
        <el-select v-model="nowlabel.type">
            <el-option v-for="ntype in typelist" 
            :label="ntype" 
            :key="ntype"
            :value="ntype"/>
          </el-select>
            </el-col>
            </el-row>


              <el-row :gutter="20">
           <el-col :span="4">
        <label for="answer">通行情况:</label>
                    </el-col>
            <el-col :span="4">

	    <el-button :class="[flag===0?yes:no]" @click="chooseEmer(0)">{{pass1}}</el-button>
      </el-col>
      <el-col :span="4">
	    <el-button :class="[flag===1?yes:no]" @click="chooseEmer(1)">{{pass2}}</el-button>

            </el-col>
            </el-row>

      <el-row :gutter="20">
           <el-col :span="6">
        <label for="point">提醒其他人需要注意前方路况的时间:</label>
                    </el-col>
            <el-col :span="4">
        <el-input v-model="nowlabel.time" placeholder='0'>
          </el-input>
          </el-col>
          <el-col :span="4">
        <label for="point">分钟</label>
                    </el-col>
     
       </el-row>

<el-row  type="flex" justify="end">
<el-col :span="7">

        <el-button type="primary" @click="editLabel ()" icon="el-icon-search"
            >修改</el-button>
     </el-col>
       </el-row>

    </el-dialog>




  </div>
</template>

<script>
export default {
  data () {
    let self = this;
    return {
      // 查询条件
      queryInfo: {
        id: '',
        currentPage: 1,
        title: '',
        starttime: null,
        endtime: null
      },
      // 时间起始
      timeRange:['',''],
      // 标签列表
      labelList: [],
      total: 0,
      passlist:["无法通行","影响通行",''],
      typelist:["拥堵","事故","障碍物","封路","修路","其它","求助",''],
      selecttype:'',
      selectpass:'',
      selectaddress:'',

      newpoint:'',
      newaddress:'浙江省杭州市xx区xx街道xxx(输入坐标自动显示)',
      newtype:'',
      newpass:'无法通行',
      newtime:'',
      showDialogVisible: false,
      newDialogVisible: false,

      flag:0,
      yes:"yes",
      no:"no",
      pass1:'无法通行',
      pass2:'影响通行',
      nowlabel:{},

      address:"",
      location: "",
      lng: 0,
      lat: 0,

    }
  },
  created () {
    // 加载页面时 加载一次数据
    this.getLabelList(1)
  },
  methods: {
    async getLabelList (page) {
      const { data: res } = await this.$http.get('label/labellist/' + page)
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.labelList = res.data.records
      this.total = res.data.total
      console.log(res.data.records)
    },

    // 表格 分页页数切换
    handleCurrentChange (newPage) {
      this.queryInfo.currentPage = newPage
      this.getLabelList(newPage)
    },

    handleSizeChange (newSize) {
      this.queryInfo.pageSize = newSize
      this.getissueList(1)
    },

    handleAddNewLabel () {
      this.newDialogVisible = true
    },

    // 删除用户
    async deleteLabel (id) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该标签, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((error) => error)

      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data: res } = await this.$http.delete('label/delete/' + id)
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.$message.success('删除标签成功')
      // 重新加载一次
      this.getLabelList(this.queryInfo.currentPage)
    },


    async search () {
      let startdate = this.timeRange[0]
      let enddate = this.timeRange[1]
      const { data: res } = await this.$http.post(
        'label/search',
        { 'endtime': enddate,
          'starttime': startdate,
          'type': this.selecttype,
          'pass':this.selectpass,
          'address':this.selectaddress }, {
          headers: {
            'content-type': 'application/json',
            'X-Request-With': 'XMLHttpRequest',
            'token': window.sessionStorage.getItem('token')
          }
        }
      )
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.labelList = []
      this.labelList = res.data
      this.total = this.label.length

    },

    async insertLabel () {

      let point = this.newpoint

      //  console.log(this.queryInfo.title)
      // console.log(this.lasttime)
      const { data: res } = await this.$http.post(
        'label/insert',
        { 'point': point, 'type': this.newtype, 'pass': this.newpass,'address':this.newaddress,'time':this.newtime }, {
          headers: {
            'content-type': 'application/json',
            'X-Request-With': 'XMLHttpRequest',
            'token': window.sessionStorage.getItem('token')
          }
        }
      )

      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.getLabelList(this.queryInfo.currentPage)
      this.newDialogVisible = false
      return this.$message.success('新建标签成功')
      
    },
    
    chooseEmer(itype){
	    if(itype===0){
        this.flag=0 
        this.newpass = this.pass1
        this.nowlabel.pass = this.pass1
       // console.log(this.newpass)
	    }else{
        this.flag=1 
        this.newpass = this.pass2
        this.nowlabel.pass = this.pass2

     // console.log(this.newpass)
    }
    },

    async getlabel(id){
      var { data: res } = await this.$http.get('label/getlabel/' + id)
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.showDialogVisible = true
      this.nowlabel = res.data

      if(this.nowlabel.pass == "无法通行"){this.chooseEmer(0)}
      else if (this.nowlabel.pass == "影响通行"){this.chooseEmer(1)}

    },

    async editLabel(){
      const { data: res } = await this.$http.post(
        'label/update',
        { 'id':this.nowlabel.id,'type': this.nowlabel.type, 'pass': this.nowlabel.pass,'address':this.nowlabel.address,'time':this.nowlabel.time }, {
          headers: {
            'content-type': 'application/json',
            'X-Request-With': 'XMLHttpRequest',
            'token': window.sessionStorage.getItem('token')
          }
        }
      )

      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.showDialogVisible = false
      this.getLabelList(this.queryInfo.currentPage)
      return this.$message.success('修改成功')
    },

    getaddress(){
      let pointt = this.newpoint.split(",")
      let _that = this;
      let lgn = pointt[0]
      let lat = pointt[1]
     
      AMap.plugin('AMap.Geocoder', function() {
  var geocoder = new AMap.Geocoder({
    // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
    city: '全国'
  })
 
  var lnglat = [lgn, lat]

  geocoder.getAddress(lnglat, function(status, result) {
    if (status === 'complete' && result.info === 'OK') {
        // result为对应的地理位置详细信息
        console.log(result)
        _that.newaddress = result.regeocode.formattedAddress
    }
  })
})
      
    }
   

  },

  
  filters: {

  }
}
</script>

<style lang="less" scope>
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }

.el-col {
    border-radius: 4px;
  }


  
.yes{
    float:left
		width:4.2rem 
		height:2rem 
		line-height:2rem 
		text-align:center
		border-radius:1rem 
		&:nth-child(1){
			margin-right:0.8rem 
    }
    
    color:blue
    }
.no{
    float:left
		width:4.2rem 
		height:2rem 
		line-height:2rem 
		text-align:center
		border-radius:1rem 
		&:nth-child(1){
			margin-right:0.8rem 
    }
    color:black

}

</style>
